Comments (9)
I am having a similar problem - using a similar configuration (verbatim from the docs, except using stylus instead of css or less).
When I say it 'doesn't work' it simply makes no difference to the build, and no text is extracted, with the css still being built into the JS file.
from vue-loader.
Also there is error
Uncaught Error: Cannot find module "-!./../../../..!./../../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-063a55c3!./../../../../../../../../../myapp/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!style-loader!css-loader!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./app.vue"
from vue-loader.
Actually I'm still having the exact error as described by @fobdy.
from vue-loader.
#68 ?
from vue-loader.
It doesn't help
from vue-loader.
It works fine for me with vue-loader 7.0.3. Please be more specific about what is not working, e.g. errors etc.
Also make sure you have done a clean install of your node_modules.
from vue-loader.
In webstorm I create new project nodejs+express with jade and stylus. Package.json :
{
"name": "extracttext",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "babel-node --presets babel-preset-es2015 ./bin/www",
"build": "babel-node --presets babel-preset-es2015 ./build.js"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"stylus": "0.42.3",
"vue": "^1.0.8",
"vue-router": "^0.7.6"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.1.18",
"babel-runtime": "^6.2.0",
"css-loader": "^0.21.0",
"extract-text-webpack-plugin": "^0.9.1",
"style-loader": "^0.13.0",
"stylus-loader": "^1.4.2",
"template-html-loader": "0.0.3",
"vue-hot-reload-api": "^1.2.1",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.1.1",
"webpack": "^1.12.6"
}
}
Webpack.config:
/**
* Created by root on 16.09.15.
*/
"use strict";
import webpack from "webpack";
import path from "path";
import ExtractTextPlugin from "extract-text-webpack-plugin";
export default {
context: __dirname,
entry: "./vue/client.entry.js",
output:{
path: path.join(__dirname,"public/production"),
filename:"production.js"
},
module :{
loaders:[
{
test:/\.vue$/,
loader:"vue"
},
{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: "babel",
query:{
cacheDirectory:true,
presets:["es2015"]
}
}
//{
// test: /\.css$/,
// loader: ExtractTextPlugin.extract("style-loader","css-loader")
//},
//{
// test: /\.styl$/,
// loader: ExtractTextPlugin.extract("style-loader","css-loader!stylus-loader")
//},
//{
// test:/\.html$/,
// loader:"html-loader"
//},
//{
// test:/\.(eot|woff|ttf|svg|png|jpg)$/,
// loader:"url-loader?limit=30000&name=[name]-[hash].[ext]"
//}
]
},
vue:{
loader:{
css: ExtractTextPlugin.extract("css"),
stylus: ExtractTextPlugin.extract("css!stylus")
}
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
plugins:[
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
PORT: 8080
}
}),
//new webpack.optimize.UglifyJsPlugin({
// compress:{
// warnings:false
// }
//}),
new ExtractTextPlugin("production.css")
],
devtool:'source-map'
}
Client.entry:
"use strict";
import Vue from "vue";
import VueRouter from "vue-router";
import configRouter from "./route.config.js";
import appVue from "./app.vue";
//import testcss from "../public/stylesheets/style.styl";
//import testcss1 from "../public/stylesheets/index.css";
//import testcss2 from "../public/stylesheets/style.css";
//import testcss3 from "../public/stylesheets/index.styl";
Vue.use(VueRouter);
const router = new VueRouter({
history:true,
saveScrollPosition:true
});
configRouter(router);
const App = Vue.extend(appVue);
router.start(App,"#app");
Route.config:
"use strict";
import Vue from "vue";
import indexVue from "./index.vue";
export default (router)=>{
router.map({
"":{
component : indexVue,
}
});
}
app.vue:
<style lang = "stylus">
.my1
font-family 'Roboto', Helvetica, Arial, sans-serif
font-weight 500
font-size 20px
color #333
</style>
<template lang = "jade">
router-view
</template>
<script lang="babel" type="text/babel">
export default {
data() {
return { }
}
}
</script>
index.vue:
<style lang = "stylus" >
.my2
font-family 'Roboto', Helvetica, Arial, sans-serif
font-weight 400
font-size 40px
color #333
</style>
<template lang ="jade">
slot
.my2 HELLO!
</template>
<script lang = "babel" type="text/babel">
export default {
data() {
return { }
},
components : {
}
}
</script>
You can see commented block in webpack.config and client.entry. I tested out extract-text-plugin without vue and in works fine. Any ideas?
from vue-loader.
Same problem for me but with following message
./app/components/app/app.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../../myapp/node_modules/extract-text-webpack-plugin/loader.js in /Users/user/Documents/projects/html/myapp/app/components/app
loader.js
exists there
from vue-loader.
Closing (outdated)
from vue-loader.
Related Issues (20)
- Compiling RuleSet failed: Unexpected property test in condition HOT 1
- vue cli3 在打包到时候会把项目中没有使用的图片文件打包输出到dist目录。 HOT 1
- 同一页面有两个不同scopeid HOT 3
- 使用swc-loader替换babel报错 HOT 1
- Build error: Cannot read properties of null (reading 'lang') HOT 2
- v17.3 breaks v-bind HOT 2
- vue2 Upgrade vue3 vue-loader browser error message: Uncaught TypeError: Object(...) is not a function
- Error: Codegen node is missing for element/if/for node. HOT 1
- TypeError: Cannot read property 'compilation' of undefined HOT 1
- Scoped styles are not applied when loading Vue component via SystemJS
- Tricky Src Imports : no compile or hot-reload with version 17.4.2
- Importing plain component file from separate monorepo package results in wrong build
- const/let converto var HOT 1
- Custom blocks when using vite HOT 1
- about defineAsyncComponent function in Vue3, the path always wrong after webpack compiled
- TypeScript with noImplicitAny: true and SFC without script tag
- Vue3.0项目在CentOS上进行打包构建后,同一个单文件的组件里,子元素和父元素的data-v-hash值不一致,导致子元素的样式丢失
- comments not removed HOT 2
- 使用 module federation 时 如果 __file 路径相同 会引起热更混乱
- Could not compile Flowtype syntax
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-loader.