Je veux pouvoir importer dans n'importe quel fichier de mon projet les deux types de fichiers.
import 'styles/index.scss';
import 'styles/build/_style.css'
Il est important de noter que j'utilise Nextjs 7 et webpack 4 (livré avec nextjs7)
Dans Nextjs 6, nous utilisions dans next.config.js
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const commonsChunkConfig = (config, test = /\.css$/) => {
config.plugins = config.plugins.map(plugin => {
if (
plugin.constructor.name === 'CommonsChunkPlugin' &&
plugin.minChunks != null
) {
const defaultMinChunks = plugin.minChunks;
plugin.minChunks = (module, count) => {
if (module.resource && module.resource.match(test)) {
return true;
}
return defaultMinChunks(module, count);
};
}
return plugin;
});
return config;
};
module.exports = withCSS(withSass({
webpack: (config, { isServer }) => {
config = commonsChunkConfig(config, /\.(sass|scss|css)$/)
return config
}
}))
J'ai initialisé mon projet comme ceci inclut SCSS CSS PNG SVG TTF.
npm install withSass@canary withCSS@canary node-sass
//next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
webpack (config, options) {
config.module.rules.Push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config;
}
}));
Utilisez le next-compose-plugins
.
Il fournit une API plus propre pour créer next.js
configurations, vous N'AVEZ PAS besoin d'installer @zeit/next-css
et vous N'AVEZ ÉGALEMENT PAS à faire webpack loader
configuration pour le faire fonctionner.
Voici un exemple avec le @zeit/next-source-maps
plugin à des fins de démonstration:
/* Import modules */
const withSourceMaps = require( '@zeit/next-source-maps' );
const withSass = require( '@zeit/next-sass' );
const withPlugins = require( 'next-compose-plugins' );
/* Configuration */
const NextAppConfig = ({
// config stuff goes here, no webpack loader config required
})
/* Export declaration */
module.exports = withPlugins([
[ withSourceMaps ],
[ withSass ]
], NextAppConfig );
Je préfère déclarer le tableau avant l'exportation car c'est une configuration encore plus propre:
// ... imports go here
/* Plugins array variable */
var plugins = [ [ withSourceMaps ], [ withSass ] ];
/* CONFIGURATION */
const NextAppConfig = ({
// Config stuff goes here, no webpack configuration required
})
/* EXPORT DECLARATION */
module.exports = withPlugins( plugins, NextAppConfig );
Pour ceux qui ont un package externe (dans node_modules), voici une solution CSS + SASS de travail sur la prochaine 9.3.0. Cela implique une importation standard du CSS via SASS. Cet exemple utilise videojs:
package.json
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"next": "^9.3.0",
"next-absolute-url": "^1.2.2",
"node-sass": "^4.13.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"video.js": "^7.7.5"
},
next.config.js:
const withSass = require("@zeit/next-sass");
module.exports = withSass({
assetPrefix: process.env.NEXT_BASE_PATH || '',
exportTrailingSlash: true,
exportPathMap: function() {
return {
'/': { page: '/' }
};
}
});
composant "VideoPlayer.jsx" nécessitant un CSS externe
import './VideoPlayer.scss';
VideoPlayer.scss:
@import '~video.js/dist/video-js.css';